<template>
    <el-dialog :model-value="localDialogVisible" :title="localTitle" :before-close="localCancelDialog" width="35%">
        <el-form
            ref="packageFormRef"
            :model="packageForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="内容包名称" prop="name">
                <el-input v-model="packageForm.name"></el-input>
            </el-form-item>
            <el-form-item label="自动入包" prop="isautopackage">
                <el-radio v-model="packageForm.isautopackage" label="1">是</el-radio>
                <el-radio v-model="packageForm.isautopackage" label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="所属部门" prop="groupid" class="chkboxgroup-list">
                <el-checkbox-group v-model="packageForm.groupid">
                    <el-checkbox v-for="groupinfo in groupList" :key="groupinfo.groupid" :label="groupinfo.groupid" name="groupid">{{groupinfo.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="packageForm.sort"></el-input>
                <span style="font-size: 12px;color:#bbb">列表页面根据此排序字段的值进行倒序排列</span>
            </el-form-item>
        </el-form>
        <template #footer>
            <div align="center">
                <el-button type="primary" size="small" @click="handleSavePackageForm">{{localToDialogData.action == 'add' ? '添加' : '保存'}}</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import {  reactive, ref, toRef } from 'vue'
    import {getSubRefGroup} from "@/api/group"
    import { createPackage, updatePackage, getPackage } from "@/api/package/package"
    import {ElMessage} from 'element-plus'
    export default {
        name: "packageCreateDialog",
        components: {},
        props:{
            visible: {
                type: Boolean,
                default: false
            },
            toDialogData:{
                type: Object
            }
        },
        emits:['cancelDialog'],
        setup(props, context) {
            const localTitle = ref(null)
            const localDialogVisible = toRef(props, 'visible')
            const localToDialogData = toRef(props, 'toDialogData')

            const localCancelDialog = () => {
                context.emit('cancelDialog','PackageSave')
            }

            const packageFormRef = ref(null)
            const packageForm = reactive({
                name:'',
                isautopackage:'0',
                groupid:[],
                sort:1
            })
            const rules = reactive({
               name: {required: true, message: '请输入内容名称', trigger: 'blur'},
               isautopackage: {required: true, message: '请选择是否自动入包', trigger: 'blur'},
               groupid: {type: 'array',required: true,message: '请选择内容包所属部门',trigger: 'change',}
            })
            
            if(localToDialogData.value.action == 'add'){
                localTitle.value = '内容包添加'
            }else if(localToDialogData.value.action == 'edit'){
                localTitle.value = '内容包编辑'
                getPackage({packageid:localToDialogData.value.packageid,corpid:localToDialogData.value.corpid}).then(response => {
                    if(response.errcode == 0){
                        packageForm.packageid = response.data.packageid
                        packageForm.name = response.data.name
                        packageForm.isautopackage = response.data.isautopackage+''
                        packageForm.groupid = response.data.groupid
                        packageForm.sort = response.data.sort
                    }else{
                        console.log(response)
                    }
                })
            }
            
            const groupList = ref([])
            getSubRefGroup().then(response => {
                if( response.data.length > 0 ){
                    Object.assign(groupList.value, response.data)
                }
                //console.log(groupList.value)
            })

            const handleSavePackageForm = () => {
                packageFormRef.value.validate(valid => {
                    if(valid){
                        if(localToDialogData.value.action == 'add'){
                            createPackage(packageForm).then(response => {
                                if(response.errcode == 0){
                                    ElMessage({type: 'success', message: '内容包添加成功', duration: 2000})
                                    context.emit('cancelDialog','PackageSave',1)
                                }else{
                                    console.log(response)
                                }
                            })
                        }else if(localToDialogData.value.action == 'edit'){
                            updatePackage(packageForm).then(response => {
                                if(response.errcode == 0){
                                    ElMessage({type: 'success', message: '内容包更新成功', duration: 2000})
                                    context.emit('cancelDialog','PackageSave',1)
                                }else{
                                    console.log(response)
                                }
                            })
                        }
                    }
                })
            }
            
            return {
                localTitle,
                localDialogVisible,
                localToDialogData,
                localCancelDialog,
                packageFormRef,
                packageForm,
                rules,
                groupList,
                handleSavePackageForm
            }
        }
    }
</script>

<style scoped  lang="scss">
    .demo-ruleForm{
        .el-form-item{
            margin-bottom:10px;
        }
        .is-error{
            margin-bottom:20px;
        }
    }
</style>